<!--
 * @Author: Freude Xu
 * @Date: 2021-10-28 21:11:21
 * @LastEditors: ly
 * @LastEditTime: 2021-11-03 11:24:09
 * @Description: 
-->
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <div id="container"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Line } from "@antv/g2plot";
export default {
  name: "Dashboard",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {},
  mounted() {
    let data = [
      { year: "2001", value: 3 },
      { year: "2002", value: 4 },
      { year: "2003", value: 3.5 },
      { year: "2004", value: 5 },
      { year: "2005", value: 4.9 },
      { year: "2006", value: 6 },
      { year: "2007", value: 7 },
      { year: "2008", value: 9 },
      { year: "2009", value: 13 },
    ];
    const line = new Line("container", {
      data,
      xField: "year",
      yField: "value",
    });

    line.render();
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>


